<template>
  <div>
    <!--判断-->
    <el-card shadow="always">
      <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="时段监控" name="1">
          <el-card shadow="always" style="margin: 5px 0 5px 0">
            <el-form :model="queryChartForm" label-width="80px" :inline="true">
              <el-form-item label="时间">
                <el-date-picker
                  v-model="queryChartForm.payDate"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  size="mini">
                </el-date-picker>
              </el-form-item>
            </el-form>

            <el-table
              :data="tableData"
              style="width: 100%"
              height="500"
              border>
              <el-table-column
                label="序号"
                align="center"
                width="100"
                type="index">
              </el-table-column>
              <el-table-column
                label="短视频"
                width="500"
                align="center">
                <template slot-scope="scope">
                  <el-row>
                    <el-col :span="7">
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.cover"
                        fit="cover"></el-image>
                    </el-col>
                    <el-col :span="17">
                      <el-row>
                        <el-col style="text-overflow:ellipsis">
                          <el-button type="text" @click="seeVideo(scope.row.shareUrl)">
                            {{scope.row.title}}
                          </el-button>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column
                label="发布时间"
                width="105"
                align="center">
                <template slot-scope="scope">
                  {{scope.row.videoCreateTime | formatDate}}
                </template>
              </el-table-column>
              <el-table-column
                prop="playCount"
                label="播放量"
                width="105"
                align="center">
              </el-table-column>
              <el-table-column
                prop="diggCount"
                label="点赞量"
                width="105"
                align="center">
              </el-table-column>
              <el-table-column
                prop="commentCount"
                label="评论量"
                width="105"
                align="center">
              </el-table-column>
              <el-table-column
                prop="shareCount"
                label="分享量"
                width="105"
                align="center">
              </el-table-column>
              <el-table-column
                prop="forwardCount"
                label="转发量"
                width="105"
                align="center">
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-card>
        </el-tab-pane>
        <!--<el-tab-pane label="评论监控" name="2">
          <el-card shadow="always">

          </el-card>
        </el-tab-pane>-->
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import {getVideoList} from "@/api/work/video/video";
  import ElCol from "element-ui/packages/col/src/col";
  import ElRow from "element-ui/packages/row/src/row";
  import BScroll from 'better-scroll';
  export default{
    components: {
      ElRow,
      ElCol
    },
    data(){
      return {
        activeName: '1',
        total: 0,
        currentPage: 0,
        queryChartForm: {},
        tableData: [],
        openIdList: []
      }
    },
    filters: {
      formatDate: function (value) {
        var unixTimestamp = new Date(value * 1000)
        return unixTimestamp.toLocaleString()
      }
    },
    created() {
      this.getRouterData()
      this.getVideoList()
    },
    methods: {
      handleCurrentChange(val) {
        this.currentPage = val
        this.getVideoList()
      },
      /*获取列表*/
      getVideoList(){
        getVideoList(this.currentPage, this.openIdList).then(response => {
          console.log('statisticsResult', response)
          const result = response.data
          this.tableData = result.list
          this.total = response.data.total
          this.handleAccumulate();
        });
      },
      /*观看视频*/
      seeVideo(val){
        window.location.href = val
      },
      getRouterData() {
        this.openId = this.$route.query.id
        this.openIdList.push(this.openId)
        console.log(this.openId)
      },
      dateFormat: function (time) {
        var date = new Date(time);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      }
    }
  }
</script>

<style>
  .col {
    display: flex;
    justify-content: center;
    align-items: center
  }

  .wrapper {
    overflow: hidden;
    width: 1350px;
    height: 45px;
  }

  .content {
    width: 3000px
  }
</style>
